<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				width: 100%;
				height: 100%;
			}

			body {
				background-color: #000;
			}

			#myCanvas {
				position: absolute;
				z-index: 1;
			}

			input[type="range"] {
				width: 400px;
			}

			.ui {
				display: none;
				color: #fff;
			}

			.inline {
				display: flex;
				height: 60px;
				align-items: center;
			}

			.txt {
				margin-right: 20px;
			}

			.btn-area {
				position: fixed;
				left: 0;
				top: 0;
				width: 160px;
				height: 100%;
				padding-top: 20px;
				background-color: #00000022;
				z-index: 2;
				transition: .2s;
			}

			.btn-area:hover {
				background-color: #99999944;
			}

			.cell {
				width: 100%;
				height: 50px;
				box-sizing: border-box;
				padding: 0 20px;
				line-height: 50px;
				color: #d0d0d0aa;
				text-align: center;
				user-select: none;
				cursor: pointer;
				transition: .3s;
			}

			.cell:hover {
				color: #fff;
				background-color: #00000033;
			}

			.cell.act {
				color: #fff;
				background-color: #00000088;
			}

			.btn {
				border-bottom: 1px solid #ffffff55;
			}
			.children{
				position: relative;
				color: #c5c5c588;
				font-size: 12px;
				line-height: 40px;
				transition: .2s;
			}
			.children:hover{
				color: #fff;
				background-color: #00000088;
			}
			.children.act{
				color: #fff;
				background-color: #00000088;
			}
			.children.act::before{
				position: absolute;
				content: "";
				left: 15px;
				top: 50%;
				transform: translate(0,-50%);
				width: 10px;
				height: 10px;
				background-color: #4fffad;
			}
		</style>
	</head>
	<body>
		<div id="funButtons" class="btn-area">
			<div class="cell"> <div data-index="0" class="btn">旋转彩灯</div> </div>
			<div class="cell"> <div data-index="1" class="btn">粒子波浪</div> </div>
			<div class="cell"> <div data-index="2" class="btn">科技护盾</div> </div>
			<div class="cell"> <div data-index="3" class="btn">结界空间</div> </div>
			<div class="cell"> <div data-index="4" class="btn">黑洞</div> </div>
			<div class="cell"> <div data-index="5" class="btn">亮晶晶</div> </div>
			<div class="cell act">
				<div data-index="6" class="btn">跃动方块</div>
				<div id="subButtons">
					<div data-index="0" class="children act">面着色</div>
					<div data-index="1" class="children">线框着色</div>
					<div data-index="2" class="children">顶点着色</div>
				</div>
			</div>
		</div>
		<canvas id="myCanvas" width="800" height="800"></canvas>
		<script type="text/javascript" src="tCanvas.js"></script>
		<script type="text/javascript">
			var pDemo = new Particle({
				mode: 9,
				// showTail: 1,
				mode9(){
					var _this = this
					this.dis = 10000
					this.zoomQuotiety = 5
					var n = 20
					var shrink = .9
					var dis = 380
					var thickness = 200
					var starFrame = this.tStar([{
						x: -dis,
						y: -dis,
						thickness,
						shrink,
						n,
						size: 400,
						faceColor: [160,255,255,1],
						get rotate(){
							return _this.ms / 500 - Math.PI / n
						},
						// isStar: false
					},{
						x: dis,
						y: -dis,
						thickness,
						shrink,
						n,
						size: 400,
						faceColor: [160,255,255,1],
						get rotate(){
							return -_this.ms / 500
						},
					},{
						x: -dis,
						y: dis,
						thickness,
						shrink,
						n,
						size: 400,
						faceColor: [160,255,255,1],
						get rotate(){
							return -_this.ms / 500
						},
					},{
						x: dis,
						y: dis,
						thickness,
						shrink,
						n,
						size: 400,
						faceColor: [160,255,255,1],
						get rotate(){
							return _this.ms / 500 - Math.PI / n
						},
					}])
					
					var options = []
					options.push({
						x: 0,
						isTransform: true,
						sy: 1600,
						sz: 200,
						sx: 1600,
						faceColor: [160,255,255,.2]
					})
					options.push({
						y: -1400,
						isTransform: true,
						sy: 20,
						sz: 20,
						sx: 1200,
						faceColor: [255,255,255,1]
					})
					var cFrame = this.tCubic(options)
					this.draw(()=>{
						cFrame()
						starFrame()
					})
				}
			})
			// 以下是栏目切换
			function switchMode(modeIndex,option) {
				pDemo.destroy()
				var obj = {mode: modeIndex}
				if(option){
					Object.assign(obj,option)
				}
				pDemo = new Particle(obj)
			}
			funButtons.onclick = e => {
				var index = Number(e.target.dataset.index)
				var c = Array.from(e.currentTarget.children)
				c.forEach((el, i) => {
					el.classList[i == index ? 'add' : 'remove']("act")
				})
				switchMode(index + 1,subOption)
			}
			subButtons.onclick = e => {
				var index = Number(e.target.dataset.index)
				var c = Array.from(e.currentTarget.children)
				c[index].classList.toggle("act")
				if(index == 0){
					subOption.drawFace = !subOption.drawFace
				}else if(index == 1){
					subOption.drawSide = !subOption.drawSide
				}else if(index == 2){
					subOption.drawAnchor = !subOption.drawAnchor
				}
				switchMode(7,subOption)
				event.stopPropagation()
			}
			var subOption = {
				drawFace: true,
				drawSide: false,
				drawAnchor: false
			}
		</script>
	</body>
</html>
